<template lang="html">
  <div class="global">
    <div class="g-content">
      <div class="content">
        <div class="section">
          <span class="left meeting-name">{{meetingRoom.meeting_name}}</span>
          <span class="right">{{meetingRoom.meeting_people}}人场地</span>
        </div>
        <div class="section">
          <span class="left">租用时间:</span>
          <span class="right">{{bookingTime}}</span>
        </div>
      </div>
      <div class="content">
        <div class="section">
          <span class="left">预定时长:</span>
          <span class="right">{{hours}}小时</span>
        </div>
        <div class="section">
          <span class="left">单价:</span>
          <div class="right">
            <span class="original">￥{{price}} </span>
            <span class="price">￥{{meetingRoom.rent_hour}}</span>
          </div>
        </div>
        <div class="section">
          <span class="left">总价:</span>
          <span class="right">￥{{amount}}</span>
        </div>
      </div>
      <div class="content">
        <div class="section">
          <span class="left">姓名:</span>
          <input class="right" v-model="rentName" type="text" placeholder="输入名字">
        </div>
        <div class="section">
          <span class="left">电话:</span>
          <input class="right" v-model="rentCellphone" type="text" placeholder="输入电话">
        </div>
        <div class="section">
          <span class="left">公司名称:</span>
          <input class="right" v-model="rentCompany" type="text" placeholder="输入公司名称">
        </div>
        <div class="use">
          <div class="title">用途:</div>
          <textarea v-model="rentUse" class="text" name="name"></textarea>
        </div>
      </div>
      <div class="footer">
        <div class="btn" @click="booking">预定</div>
      </div>
    </div>
  </div>
</template>

<script>
import api from '@/utils/api'
import store from '@/store/store'
export default {
  data () {
    return {
      meetingRoom: {},
      bookingDate: '',
      startTime: '',
      endTime: '',
      price: 0,
      hours: 0,
      amount: 0,
      rentName: '',
      rentCellphone: '',
      rentCompany: '',
      rentUse: ''
    }
  },
  computed: {
    bookingTime () {
      return store.state.bookingTime
    }
  },
  onShow () {
    this.rentName = ''
    this.rentCellphone = ''
    this.rentCompany = ''
    this.rentUse = ''
    this.bookingTime = ''
    this.startTime = ''
    this.endTime = ''
    this.price = 0
    this.hours = 0
    this.amount = 0
    var roomIndex = parseInt(this.$root.$mp.query.index)
    this.price = this.$root.$mp.query.price
    this.hours = this.$root.$mp.query.hours
    this.amount = this.$root.$mp.query.amount
    this.opmeetingroomlist(roomIndex)
  },
  methods: {
    opmeetingroomlist (index) {
      var param = {}
      const opmeetingroomlist = api.opmeetingroomlist(param)
      opmeetingroomlist.then(d => {
        if (d.code === 200) {
          var meetingList = d.data.list
          this.meetingRoom = meetingList[index]
        }
      })
      .catch((e) => {
        console.log(e)
      })
    },
    booking () {
      var meetingId = this.meetingRoom.meeting_id
      var startTime = this.bookingTime.slice(0, 15) + ':00'
      var endTime = this.bookingTime.slice(0, 9) + ' ' + this.bookingTime.slice(17, 21) + ':00'
      var discountAmount = (this.price - this.meetingRoom.rent_hour) * this.hours
      this.opmeetingcreateorder(meetingId, startTime, endTime, this.rentName, this.rentCellphone, this.rentCompany, this.rentUse, this.amount, discountAmount)
    },
    opmeetingcreateorder (meetingId, startTime, endTime, rentName, rentCellphone, rentCompany, rentUse, amount, discountAmount) {
      var param = {}
      param['meeting_id'] = meetingId
      param['start_time'] = startTime
      param['end_time'] = endTime
      param['rent_name'] = rentName
      param['rent_cellphone'] = rentCellphone
      param['rent_company'] = rentCompany
      param['rent_use'] = rentUse
      param['amount'] = amount
      param['discount_amount'] = discountAmount
      const opmeetingcreateorder = api.opmeetingcreateorder(param)
      opmeetingcreateorder.then(d => {
        if (d.code === 200) {
          this.$router.go(2)
        }
      })
      .catch((e) => {
        console.log(e)
      })
    }
  }
}
</script>

<style lang="css">
  @import "./meeting_booking.css";
</style>
